<template>
    <div class="shopcart">
        <header>
            <div class="title">
                <p><i class="el-icon-shopping-cart-full"></i>我的购物车</p>
                <span>温馨提示：产品是否购买成功,以最终下单为准哦,请尽快结算</span>
            </div>
        </header>
        <img v-if="getShopCart.length ===0" :src="$target + 'img/cart-empty.8b316431.png'" alt="">
        <main v-else>
            <ul>
                <li class="list_title">
                    <div class="pro_check"><input v-model="ckAll" type="checkbox">全选</div>
                    <div class="pro_img"></div>
                    <div class="pro_name">商品名称</div>
                    <div class="pro_price">单价</div>
                    <div class="pro_num">数量</div>
                    <div class="pro_total">小计</div>
                    <div class="pro_action">操作</div>
                </li>
                <li class="goods_box" v-for="item in getShopCart" :key="item.id">
                     <div class="pro_check"><input type="checkbox" @change="changeHandle($event,item.id)" :checked="item.check"></div>
                        <div class="pro_img"><img :src="$target + item.productImg"></div>
                        <div class="pro_name">{{item.productName}}</div>
                        <div class="pro_price">{{item.price}}元</div>
                        <div class="pro_num" ><el-input-number ref="elinput" @change="changeNumHandle($event,item.productID)" :value="item.num" :min="1" :max="item.maxNum" ></el-input-number></div>
                        <div class="pro_total">{{item.price * item.num}}元</div>
                        <div class="pro_action"><span class="del" @click="delHandle(item.productID)">×</span></div>
                </li>
            </ul>
        </main>
        <footer>
            <p>
                <span class="keep_shopping">继续购物</span>
                <span class="gdf">|</span>
                <span>共 <span class="red">{{getAllNum}}</span> 件商品，已选择 <span class="red">{{getAllCheckGoods}}</span> 件</span>
            </p>
            <p>
                <span class="red">合计: <span class="total_all">{{getAllTotal}}元</span></span>
                <span @click="goShopHandle" :class="showGoShop?'goShop isGoods':'goShop'">去结算</span>
            </p>
        </footer>
    </div>
</template>

<script>
 import { mapGetters, mapActions } from 'vuex'
    export default {
          data(){
            return {}
        },
        computed:{
            ...mapGetters(["getShopCart","getCkAll","getAllNum","getAllCheckGoods","getAllTotal","showGoShop"]),
            ckAll:{  // 全选 全不选
                get(){   
                    return this.getCkAll
                },
                set(value){ 
                    this.setCkAll(value)
                }
            }
        },
        methods:{
            ...mapActions(["setCkAll","setUpdateShopCartCheck","setUpdateShopCartNum","delHandle"]),
            changeHandle(e,id){ // 子选框点击，触发action里面的setUpdateShopCartCheck
                let check = e.target.checked
                this.setUpdateShopCartCheck({check,id})
            },
            changeNumHandle($event,id){ // 数量的加减操作，触发action里面的setUpdateShopCartNum 在action异步中发起请求
                this.setUpdateShopCartNum({num:$event,productID:id})
            },
            goShopHandle(){
                if(this.showGoShop == false){
                    return console.log('选择商品')
                }else {
                    this.$router.push('/ConfimOrder')
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
  .shopcart {
        background-color: #eee;
        padding-bottom: 20px ;
    }
    header{
        width: 100%;
        height: 64px;
        background: #fff;
        border-bottom: 2px solid #ff6700;
        .title {
            margin: 0 auto;
            width: 1225px;
            display: flex;
            align-items: baseline;
            p {
                i { color:#ff6700;}
                font-size: 28px;
                font-weight: 400;
            }
            span {
                margin-left: 16px;
                color: #757575;
            }
        }
    }
    main {
        width: 1225px;
        margin: 20px auto;
        overflow: hidden;
        background: #fff;
        ul {
            .list_title {
                height: 85px;
                line-height: 85px;
                display: flex;
                text-align: center;
                input {
                    margin-left: 32px;
                }
            }
            img {
                width: 120px;
                height: 120px;
            }
            .goods_box {
                width: 100%;
                height: 120px;
                display: flex;
                line-height: 120px;
                text-align: center;
                border-top: 1px solid #e0e0e0;
                .pro_total {
                    width: 210px;
                    height: 100%;
                    color: #ff6700;
                }
                .del:hover {
                    cursor: pointer;
                    color: #ff6700;
                }
            }
            .pro_check {
                width: 110px;
                height: 100%;
            }
            .pro_img {
                width: 120px;
                height: 100%;
            }
            .pro_name {
                width: 380px;
                height: 100%;
            }
            .pro_price {
                width: 140px;
                height: 100%;
            }
            .pro_num {
                width: 150px;
                height: 100%;
            }
            .pro_total {
                width: 210px;
                height: 100%;
            }
            .pro_action {
                width: 80px;
                height: 100%;
            }
        }
    }
    footer {
        height: 50px;
        width: 1225px;
        margin: 0 auto;
        background: #fff;
        line-height: 50px;
        .red { color: #ff6700;}
        .keep_shopping {
            margin-left:32px;
            color:#757575;
            cursor: pointer;
        }
        .keep_shopping:hover {
            color: #ff6700;
        }
        .gdf {margin:0 20px;color:#757575;}
        .goShop {
            width: 200px;
            height: 100%;
            float: right;
            color: #b0b0b0;
            text-align: center;
            background: #e0e0e0;
            margin-left: 40px;
            cursor: pointer;
        }
        .isGoods {
            background: #ff6700;
            color: #fff;
        }
        .total_all {
            font-size: 32px;
        }
    }
    footer p:nth-child(1){
        float: left;
    }
    footer p:nth-child(2){
        float: right;
    }
</style>